<template>
	<!-- 提货点中心 -->
	<view class="master">
		<view class="place" :style="{ background: newColor.color }"></view>
		<view class="user" :style="{ background: newColor.color }">
			<!-- 头像 -->
			<view class="left"><image :src="userData.head_img" @tap="toSetting"></image></view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="username">{{ userData.username }}</view>
				<!-- <view class="signature">{{user.signature}}</view> -->
			</view>
			<view class="moneys">
				<view class="left">
					<p class="p1">¥{{ userData.money }}</p>
					<p class="p2">实际余额</p>
				</view>
				<view class="right" @tap="jumpwithdrawal"><p>提现</p></view>
			</view>
			<view class="number">
				<view class="right">
					<p class="p1">¥{{ masterData.total_money || 0 }}</p>
					<p class="p2">当日预计业绩</p>
				</view>
			</view>
		</view>
		<view class="order">
			<!-- 订单类型 -->
			<view class="list">
				<view class="box" v-for="(row, index) in orderList" :key="index" @tap="toOrderList(row)">
					<view class="img"><image :src="row.icon" mode=""></image></view>
					<view class="text">{{ row.text }}</view>
				</view>
			</view>
		</view>
		<p class="pk_title" v-if="orderData.length == 0">取货二维码</p>
		<p class="pk_title" v-if="orderData.length !== 0">订单列表</p>
		<!-- 这里是扫码之后的订单详情 -->
		<view class="order_data" v-if="orderData.length !== 0" v-for="(item, index) in orderData" :key="index">
			<p>
				<text class="text1">订单编号</text>
				<text class="text2">{{ item.order_no }}</text>
			</p>
			<p v-for="(item1, index1) in item.order_goods" :key="index1">
				<text class="text1">{{ item1.title }}</text>
				<text class="text3" v-if="item1.option_title">规格:{{item1.option_title}}</text>
				<text class="text2" :style="{ color: newColor.color }">
					￥{{ item1.price }}
					<text style="margin-left: 20upx;color: #999999;">x{{ item1.num }}</text>
				</text>
			</p>
		</view>
		<p class="saomiao" style="margin-top: 7vh;" v-if="orderData.length !== 0" @tap="submit">确认订单</p>
		<p class="saomiao now" @tap="openEwm" :style="{ background: newColor.color }" v-if="orderData.length == 0">立即扫描</p>
		<p class="qiehuan" @tap="jumpMaster" :style="{ color: newColor.color, borderColor: newColor.color }">切换到服务点心</p>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [
				{ text: '业绩查询', icon: '../../static/image/yeji.png', url: '/pagesA/pages/other/query' },
				{ text: '订单列表', icon: '../../static/image/dingdan.png', url: '/pagesA/pages/other/otherOrder' }
			],
			tabList: [{ name: '昨日排行', id: 1 }, { name: '周排行', id: 2 }, { name: '月排行', id: 3 }],
			current: 0,
			active: true,
			imgList: ['../../static/image/one.png', '../../static/image/two.png', '../../static/image/there.png'],
			dataList: [{ name: '她家住在沙漠', number: 250 }, { name: '她家住在沙漠', number: 230 }, { name: '她家住在沙漠', number: 200 }, { name: '她家住在沙漠', number: 100 }],
			result: '',
			userData: {},
			masterData: {},
			typeid: '',
			positionId: '',
			orderData: []
		};
	},
	onShow() {
		this.getUserData();
		this.getMyinfo();
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	methods: {
		setTab(index) {
			this.current = index;
		},
		jumpMaster() {
			if(this.userData.is_leader == 1){
				this.$Router.push({ path: '/pagesA/pages/other/master' });
			}else{
				uni.showToast({
					title:'您还不是服务点',
					icon:'none'
				})
			}
		},
		openEwm() {
			//扫描二维码 仅支持小程序
			// #ifdef MP-WEIXIN
			uni.scanCode({
				scanType: ['qrCode'],
				success: res => {
					console.log(res); //二维码返回的内容
					if (res.result && res.result !== '' && res.result !== 0) {
						console.log(res.result);
						this.result = res.result;
						uni.showLoading({
							title:'查询订单中...'
						})
						this.getOrderList();
					} else {
						uni.showToast({
							title: '无效的二维码',
							icon: 'none'
						});
					}
				}
			});
			// #endif
			// #ifdef H5
			uni.showToast({
				title: '请在小程序端打开',
				icon: 'none'
			});
			// #endif
		},
		jumpwithdrawal() {
			this.$Router.push({ path: '/pagesA/pages/user/withdrawal' });
		},
		toOrderList(value) {
			this.$Router.push({
				path: value.url,
				query: {
					status: 1
				}
			});
		},
		getMyinfo() {
			this.request('user/getMyLeaderGoodsPoint', {
				type: 1
			}).then(res => {
				console.log(res);
				this.typeid = res.data[0].id;
				console.log(this.typeid);
				this.getMaster();
			});
		},
		getUserData() {
			//获取个人信息
			this.request('user/getUserInfo', {}).then(res => {
				console.log(res);
				this.userData = res.data;
			});
		},
		getMaster(id) {
			this.request('fund/getLeaderGoodsPointOrderNumMoney', {
				type: 1,
				type_id: this.typeid
			}).then(res => {
				console.log('服务点息', res);
				this.masterData = res.data;
			});
		},
		getOrderList() {
			//核销列表
			this.request('order/finishOrderInfo', {
				goods_point_id: this.typeid,
				user_id: this.result
			}).then(res => {
				console.log(res);
				if(res.code == 200){
					if(res.data.length == 0){
						uni.showToast({
							title:'订单数量为0',
							icon:'none'
						})
					}else{
						this.orderData = res.data;
					}
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			});
		},
		submit() {
			//确认订单
			let that = this;
			uni.showModal({
				title: '确认提货',
				content: '是否确认提货?',
				success: (r) => {
					if (r.confirm) {
						that.request('order/finishOrder', {
							goods_point_id: that.typeid,
							user_id: that.result
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '提货成功!'
								});
								this.orderData = []
							}
						});
					} else if (r.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.master {
	overflow: hidden;
	background-color: #fff;
}
.place {
	background-color: #f23a3a;
	height: 50upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.user {
	width: 100%;
	padding: 0 4%;
	display: flex;
	align-items: center;
	// position: relative;
	background-color: #f23a3a;
	padding-bottom: 240upx;
	position: relative;
	.left {
		width: 16vw;
		height: 16vw;
		flex-shrink: 0;
		margin-right: 20upx;
		// border: solid 1upx #fff;
		border-radius: 100%;
		image {
			width: 16vw;
			height: 16vw;
			border-radius: 100%;
		}
	}
	.right {
		width: 40%;
		.username {
			font-size: 32upx;
			color: #fff;
		}
		.signature {
			color: #eee;
			font-size: 28upx;
		}
	}
	.moneys {
		display: flex;
		position: absolute;
		top: 30upx;
		right: 20upx;
		.left {
			text-align: center;
			border-radius: 0;
			margin-right: 20upx;
			min-width: 200upx;
			text-align: right;
			.p1 {
				font-size: 32upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.p2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			width: 130upx;
			height: 56upx;
			line-height: 56upx;
			border: 2upx solid rgba(255, 255, 255, 1);
			border-radius: 28upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
	.number {
		position: absolute;
		bottom: 120upx;
		left: -20upx;
		transform: translateX(-50%);
		width: 400upx;
		.right {
			float: right;
			text-align: center;
			// width: 180px;
			.p1 {
				font-size: 46upx;
				color: #ffffff;
			}
			.p2 {
				font-size: 24upx;
				color: #ffffff;
			}
		}
		.center {
			width: 1upx;
			height: 40upx;
			background: rgba(255, 255, 255, 1);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.order {
	width: 84%;
	margin: 30upx 4% 30upx 4%;
	padding: 30upx 4% 20upx 4%;
	background-color: #fff;
	box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
	border-radius: 15upx;
	z-index: 100;
	position: absolute;
	top: 300upx;
	left: 50%;
	height: 140upx;
	box-sizing: content-box;
	transform: translateX(-55%);
	overflow: hidden;
	.all_order {
		font-size: 24upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text-align: right;
		transition: all 0.2s;
		image {
			width: 20upx;
			height: 25upx;
			transform: translateY(5upx);
			margin-left: 10upx;
		}
		&:active {
			transform: scaleY(1.2);
		}
	}
	.list {
		display: flex;
		padding-bottom: 10upx;
		margin-top: 20upx;
		.box {
			width: 50%;
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
				image {
					width: 40upx;
					height: 40upx;
					display: block;
				}
			}
			.text {
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 26upx;
				color: #1c1c1c;
				margin-top: 20upx;
			}
		}
	}
	.balance-info {
		display: flex;
		padding: 10upx 0;
		.left {
			width: 75%;
			display: flex;
			.box {
				width: 50%;
				font-size: 28upx;

				.num {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					color: #f9a453;
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					color: #3d3d3d;
					font-size: 28upx;
				}
			}
		}
		.right {
			border-left: solid 1upx #17e6a1;
			width: 25%;
			.box {
				.img {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					.icon {
						font-size: 45upx;
						color: #e78901;
					}
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}
	}
}
.pk_title {
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	margin-top: 150upx;
	padding: 0 30upx;
}
.tabs {
	padding: 0 30upx;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: space-between;
	margin-top: 20upx;
	> view {
		flex: 1;
		height: 70upx;
		line-height: 70upx;
		background: rgba(242, 242, 242, 1);
		color: #999999;
		text-align: center;
		min-width: 33%;
		max-width: 33%;
		font-size: 28upx;
		transition: all 0.3s;
		&:first-child {
			border-top-left-radius: 38upx;
			border-bottom-left-radius: 38upx;
			overflow: hidden;
		}
		&:last-child {
			border-bottom-right-radius: 38upx;
			border-top-right-radius: 38upx;
			overflow: hidden;
		}
		&:active {
			transform: scaleX(0.93);
		}
	}
	.active {
		color: #ffffff;
		background-color: #f23a3a;
	}
}
.paihang {
	width: 686upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	border-radius: 20upx;
	margin: 0 auto;
	margin-top: 30upx;
	> p {
		height: 80upx;
		line-height: 80upx;
		padding: 20upx 30upx;
		.paiming_img {
			width: 40upx;
			height: 60upx;
			float: left;
			margin-top: 10upx;
		}
		.top_title {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			float: left;
			width: 40upx;
			height: 60upx;
			text-align: center;
		}
		.hade_img {
			width: 70upx;
			height: 70upx;
			border-radius: 50%;
			float: left;
			margin-top: 5upx;
			margin-left: 30upx;
			margin-right: 20upx;
		}
		.name {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			float: left;
		}
		.number {
			font-size: 28upx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(253, 164, 87, 1);
			float: right;
		}
		.jiangbei {
			float: right;
			width: 33upx;
			height: 35upx;
			margin-top: 20upx;
			margin-right: 10upx;
		}
	}
}
.qiehuan {
	width: 500upx;
	height: 65upx;
	background: rgba(255, 255, 255, 1);
	border: 2upx solid rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 28upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(242, 58, 58, 1);
	line-height: 65upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 5vh;
	margin-bottom: 20upx;
	transition: all 0.3s;
	&:active {
		transform: scaleX(0.96);
	}
}
.saomiao {
	width: 230upx;
	height: 65upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 28upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 65upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 12vh;
	margin-bottom: 8vh;
	transition: all 0.3s;
	&:active {
		transform: scaleX(0.96);
	}
}
.now {
	margin-bottom: 20vh;
}
.order_data {
	padding: 30upx;
	> p {
		height: 80upx;
		line-height: 80upx;
		border-bottom: 1upx solid #f2f2f2;
		.text1 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			max-width: 60vw;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.text2 {
			float: right;
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		.text3{
			margin-left: 40upx;
			font-size: 24upx;
			color: #999999;
		}
	}
}
</style>
